<template>
  <div id="companyrecive">
    <el-row :span="24">
      <el-col :span="4" :offset="3">
        <div class="div_border_title">
          <h2 v-if="type === 'invitation'">发送的邀请函</h2>
          <h2 v-if="type === 'interview'">发送的面试通知</h2>
        </div>
      </el-col>
      <el-col :span="16" :offset="3">
        <router-view></router-view>
      </el-col>
      <el-col :span="2" class="button">
        <el-row>
          <el-col class="border">
            <div class="menu-item" @click="toOther('/companyrecive/companyinvitation')">
              <i class="fa fa-envelope-o fa-2x"></i>
              <p>邀请函</p>
            </div>
          </el-col>
          <el-col class="border">
            <div class="menu-item" @click="toOther('/companyrecive/companyinterview')">
              <i class="fa fa-twitch fa-2x"></i>
              <p>面试通知</p>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  export default {
    name: 'companyrecive',
    data () {
      return {
        type: ''
      }
    },
    methods: {
      toOther (item) {
        this.$router.push({'path': item})
      },
    },
    created () {
      if (this.$route.path === '/companyrecive/companyinvitation') {
        this.type = 'invitation'
      } else if (this.$route.path === '/companyrecive/companyinterview') {
        this.type = 'interview'
      }
    },
    watch: {
      '$route' (to, from) {
        if (to.name === 'CompanyInvitationList') {
          this.type = 'invitation'
        } else if (to.name === 'CompanyInterviewList') {
          this.type = 'interview'
        }
      }
    }
  }
</script>
<style scoped>
  #companyrecive {
    margin-top: 2em;
  }

  .title {
    border-bottom: 1px solid #F2F2F2;
    padding: 0.5em;
    color: #575B6A;
    font-size: 1.3em;
  }

  .background {
    margin-top: 0.9em;
    background-color: #FAFAFA;
  }

  .button {
    margin-top: 3em;
    margin-left: 2em;
  }

  .border {
    margin: 0.3em;
  }

  .menu-item {
    background: #FAFAFA;
    border: 1px solid #F2F2F2;
    padding: 10px;
    text-align: center;
    color: #999;
  }

  .menu-item:hover {
    color: #20A0FF;
    background: #fff;
    border: 1px solid #e8e8e8;
  }

</style>
